<template>
  <div class="t-float" ref="moveContent" :class="{'extend':extend}" v-show="realList.length > 0">
    <ul class="imgcont" v-show="extend">
      <li class="imgitem" v-for="(item,index) in realList" :key="index">
        <t-icon 
          @click="handleClick(item)"
          size="0.8rem"
          labelSize="0.3rem"
          :name="item.img"
          :label="item.label">
        </t-icon>
      </li>
    </ul>
    <div class="btns" ref="moveHandle">
      <t-icon 
        v-if="!extend"
        @click="extend=true"
        size="0.8rem"
        labelSize="0.3rem"
        :name="require('@/assets/icon-add.png')">
      </t-icon>
      <t-icon 
        v-else
        @click="extend=false"
        size="0.8rem"
        labelSize="0.3rem"
        :name="require('@/assets/icon-cancel.png')">
      </t-icon>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent ,watch,reactive,ref,Ref,nextTick,computed,onMounted} from 'vue'
import {
  uni_nfcRead,uni_scanCode,
  debounce,$local
} from "@/utils"
import {useStore} from 'vuex'
import {Notify} from "vant"
const scanImg = require('@/assets/icon-scan-block.png')
const nfcImg = require('@/assets/icon-tool-NFC.png')
const nfcBind = require('@/assets/icon-nfc-bind.png')
export default defineComponent({
  name:'tFloat',
  emits:['checked'],
  props:{
    permissions:{
      type: Array,
      default:[]
    },
    keyDict:{
      type:Object,
      default:{}
    }
  },
  setup (props,{emit}) {
    const store = useStore();
    const moveContent:Ref = ref()
    const moveHandle:Ref = ref()
    const floatBottom = $local('floatBottom') || '30%'
    const metaState = computed(()=>store.getters.metaState);
    const list = [
      {
        img: nfcImg,
        label: 'NFC',
        key:'nfc'
      },
      {
        img: nfcBind,
        label: '绑定',
        key:'nfcBind'
      },
      {
        img: scanImg,
        label: '扫一扫',
        key:'scan'
      },
      {
        img: 'plus',
        label: '新增',
        key:'add'
      },
      {
        img: 'revoke',
        label: '返回',
        key:'revoke'
      },
      {
        img: 'edit',
        label: '編輯',
        key:'delete'
      },
    ];
    const extend = ref(false)
    const realList = reactive<Array<any>>([]);
    const getScanData = function(params,item){
      let searchData:Record<string,any> = {};
      if(params.floatType == 'nfc'){
        searchData.nfcNumber = params.id;
      }else{
        searchData.scanId = params.id;
      }
      emit('checked',item)
    }
    const handleClick = function(item){
      if(realList.length > 1){
        extend.value = false;
      }
      //单独处理nfc和扫一扫
      if(item.key == 'nfc'){
        console.log('开始NFC')
        uni_nfcRead().then(res=>{
          console.log('NFC结果',res)
          if(res.result){
            let params = {id:res.result.id,...res.result.data,floatType:'nfc'};
            item.data = params;
            getScanData(params,item)
          }
        })
      }else if(item.key == 'scan'){
        console.log('开始扫一扫')
        uni_scanCode().then(res=>{
          console.log('扫一扫结果',res)
          if(res.result){
            let params = {...JSON.parse(res.result),floatType:'scan'}
            item.data = params;
            getScanData(params,item)
          }  
        })
      }else if(item.key == 'revoke'){
        window.history.back()
      }else{
        emit('checked',item)
      }
      
    }
    const getOffset = function (el) {
      let scrollTop =
        el.getBoundingClientRect().top;
      let scrollLeft =
        el.getBoundingClientRect().left;
      let offsetHeight = el.offsetHeight;
      return {
        top: scrollTop,
        left: scrollLeft,
        offsetHeight
      };
    };
    const dragFun = function (){
      let winHeight = document.body.clientHeight;
      let popUpContDom = moveContent.value,
          popUpTitle = moveHandle.value,
          offset = {top:0,left:0,offsetHeight:0},
          startX = 0,
          startY = 0;
      let moveBodyFun = function(event){
          var x = event.pageX || event.touches[0].pageX,
              y = event.pageY || event.touches[0].pageY;
          var codeX = x - startX,
              codeY = y - startY;
          if(offset.top+codeY < 40 || offset.top+codeY > winHeight - 100)return;
          popUpContDom.style.bottom = winHeight - (offset.top + codeY + offset.offsetHeight) +'px';
      };
      popUpTitle.addEventListener('touchstart',function(even){
          offset = getOffset(popUpContDom);
          startX = even.pageX || even.touches[0].pageX;
          startY = even.pageY || even.touches[0].pageY;
          popUpContDom.style['margin-top'] = '0px';
          document.body.removeEventListener('touchmove',moveBodyFun);
          document.body.addEventListener('touchmove',moveBodyFun);
      })
      popUpTitle.addEventListener('touchend',function(){
        document.body.removeEventListener('touchmove',moveBodyFun);
        $local('floatBottom',popUpContDom.style.bottom)
      })
    }
    const update = debounce(function(nowData){
      realList.splice(0)
      list.forEach(item=>{
        if(nowData.indexOf(item.key) != -1){
          if(props.keyDict[item.key]){
            item.label = props.keyDict[item.key];
          }
          realList.push(item)
        }
      })
    },100)
    watch(()=>props.permissions,(nowData)=>{
      extend.value = false;
      update(nowData)
    })
    watch(()=>metaState.value,(nowData)=>{
      nextTick(()=>{
        const meta =  store.getters.meta;
        extend.value = false;
        update(meta.permissions || [])
      })
    }) 
    onMounted(()=>{
      update(props.permissions);
      dragFun()
    })
    return {
      floatBottom,
      moveContent,
      moveHandle,
      realList,
      extend,
      metaState,
      handleClick
    }
  }
})
</script>

<style lang="scss">
@use 'sass:math';
.t-float{
  position: fixed;
  right: 0;
  bottom: v-bind(floatBottom);
  padding-right: 5Px;
  background: #fff;
  border-radius: 40Px 0px 0 40Px;
  border: 1px solid #c3c3c3;
  &.extend{
    border-radius:40Px;
    right:5Px;
    padding-right:0Px;
  }
  .t-icon{
    padding: 5Px;
  }
  .btns,.imgitem{
    text-align: center;
    min-width: 46Px;
  }
}
</style>